<template>
    <div :class="['wrapper', hasTopBorder && 'cell-top-border', hasBottomBorder && 'cell-bottom-border']" :style="containerStyle" @click="openBottomPopup">
        <div class="cell-title">
            <div style="flex-direction: row;">
                <text style="color:#ff5d54;font-size:32px;">{{label}}</text>
                <text class="cell-title-t" >{{title}}</text>
            </div>
        </div>
        <div class="cell-input">
            <text class="cell-input-t">{{showValue}}</text>
            <wxc-icon name="more"></wxc-icon>
        </div>

        <wxc-popup popup-color="rgb(255, 255, 255)"
                   :show="isBottomShow"
                   @wxcPopupOverlayClicked="closeBottomPopup"
                   pos="bottom"
                   style="border-top-right-radius: 100px;border-top-left-radius: 100px;"
                   :height="700">
            <div class="province-city-content">
                <div class="check-area">
                    <div class="prop-head">
                        <div class="prop-left"></div>
                        <div class="prop-middle">
                            <text style="font-size: 36px;">请选择</text>
                        </div>
                        <div class="prop-right" >
                            <wxc-icon name="close" @wxcIconClicked="closeBottomPopup"></wxc-icon>
                        </div>
                    </div>
                    <wxc-simple-flow :list="checkData" :themeColor="themeColor"></wxc-simple-flow>
                </div>
                <div class="data-list">
                    <list :class="['province-list',active ? 'hidden-list':'']">
                        <cell v-for="city in cityData">
                            <text @click="changeCityList(city)" class="cell-t">{{city.provinceName}}</text>
                        </cell>
                    </list>
                    <list :class="['province-list',active ? '':'hidden-list']">
                        <cell v-for="c in citys">
                            <text @click="changeCity(c)" class="cell-t">{{c.cityName}}</text>
                        </cell>
                    </list>
                </div>
            </div>
        </wxc-popup>
    </div>
</template>

<style>
    .wrapper {
        flex-direction: row;
        background-color: white;
    }

    .province-city-content {
        flex-direction: column;
    }

    .check-area{
        height:300px;
        width:750px;
        flex-direction: column;
        border-width: 2px;border-color: #e2e2e2;
    }

    .prop-head{
        width:750px;
        height:80px;
        flex-direction: row;
    }

    .prop-left{
        width:200px;
    }

    .prop-middle{
        width:350px;
        align-items: center;
        justify-content: center;
    }

    .prop-right{
        width:200px;
        align-items: flex-end;
        justify-content: center;
        padding-right:10px;
    }

    .data-list{
        width: 750px;
        height:500px;
    }

    .province-list{
        height: 500px;
    }
    
    .cell-t{
        height:80px;
        font-size:30px;
        color: #b1b1b1;
        text-align:center;
        padding-top: 25px;
        border-bottom-width: 1px;
        border-bottom-color: #e2e2e2;
    }

    .hidden-list{
        height: 0px;
    }



</style>

<style>
    .container{
        flex-direction: row;
    }
    .cell-title{
        height:100%;
        align-items: center;
        justify-content: flex-start;
        width: 300px;
        flex-direction: row;
        padding-left: 20px;
    }

    .cell-title-t{
        font-size: 32px;
        color: #272727;
    }

    .cell-input{
        height:100%;
        justify-content: flex-end;
        align-items: center;
        flex-direction: row;
        width:450px;
    }

    .cell-input-t{
        font-size: 32px;
        color: #666;
    }

    .cell-top-border {
        border-top-color: #e2e2e2;
        border-top-width: 1px;
    }

    .cell-bottom-border {
        border-bottom-color: #e2e2e2;
        border-bottom-width: 1px;
    }


</style>

<script>
    import {WxcPopup,WxcSimpleFlow,WxcIcon} from 'weex-ui'
    import nw from '../network/nw.js'

    const pref=weex.requireModule('pref')

    export default {
        components: {WxcPopup,WxcIcon,WxcSimpleFlow},
        props:{
            provinceId:{
                type:Number
            },
            cityId:{
                type:Number
            },
            height:{
                type:Number,
                default:90
            },
            value:{
                type:Number
            },
            hasTopBorder:{
                type: Boolean,
                default: false
            },
            hasBottomBorder:{
                type: Boolean,
                default: true
            },
            titleStyle:{
                type: Object
            },
            inputStyle:{
                type: Object
            },
            title:{
                type: String,
                default: '省市'
            },
            label:{
                type: String
            },
            labelStyle:{
                type: Object
            },
            showJoinTag:{//显示拼接符号
                type: String,
                default: ','
            },
            selectValue:{
                type: Object,
                default: []
            },//选中值
        },
        data: () => ({
            isBottomShow: false,
            cityData:[],//省市数据
            citys:[],//城市数据
            active:false,//是否显示城市
            containerStyle:{},
            themeColor: {
                lineColor: '#01e88a',
                pointInnerColor: '#01A65A',
                pointBorderColor: '#01c974',
                highlightTitleColor: '#01c974',
                highlightPointInnerColor: '#01A65A',
                highlightPointBorderColor: '#01c974'
            },
            checkData: [
                {
                    highlight: true,
                    title: '福建省',
                    id:12

                },
                {
                    title: '莆田市',
                    id:12
                }
            ],
            defaultTitleStyle: {
                width:300,
                fontSize:32,
                align:'left'
            },
            defaultInputStyle:{
                width:450,
                fontSize:32,
                color:'#666',
                align:'right'
            },
            defaultLabelStyle:{
                color:'#ff5d54',
                fontSize:32
            },
            tempData:[],//临时数据
            showValue:'',//显示数据

        }),
        methods: {

            //是否切换城市
            changeCityList(data){
                this.active = true
                this.citys = data.cityLists
                this.checkData.splice(0,1,{'highlight':true,'title':data.provinceName,id:data.provinceId})
                this.checkData.splice(1,1,{'title':this.citys[0].cityName,id:this.citys[0].cityId})
            },

            //选中城市
            changeCity(city){
                this.active = false
                this.checkData.splice(1,1,{'title':city.cityName,id:city.cityId})
                this.isBottomShow = false
                this.selectValue = this.checkData

                this.showValue = ''
                var values = []
                for(let i in this.checkData){
                    let ele = this.checkData[i]
                    this.showValue += this.showJoinTag +ele.title
                    values.push(ele.id)
                }

                if(this.showValue) {
                    this.showValue = this.showValue.substring(1)
                }
                this.$emit('getVal', values)

            },

            //打开省市区弹出框
            openBottomPopup() {
                this.isBottomShow = true;
            },

            //关闭省市区弹出框
            closeBottomPopup() {
                this.isBottomShow = false;
            },

            //设置默认值
            defaultValue(data){

                var stat = false
                for(let i in data){
                    let ele = data[i]

                    if(this.provinceId == ele.provinceId) {
                        this.checkData.splice(0,1,{'highlight':true,'title':ele.provinceName,id:ele.provinceId})
                        if(this.cityId) {
                            for( j in ele.cityLists){
                                var ci = ele.cityLists[j]
                                if(this.cityId == ci.cityId) {
                                    this.checkData.splice(1,1,{'title':ci.cityName,id:ci.cityId})
                                }
                            }
                        }else{
                            this.checkData.splice(1,1,{'title':ele.cityLists[0].cityName,id:ele.cityLists[0].cityId})
                        }
                        stat = true
                    }
                }


                if(!stat) {
                    this.checkData.splice(0,1,{'highlight':true,'title':data[0].provinceName,id:data[0].provinceId})
                    this.checkData.splice(1,1,{'title':data[0].cityLists[0].cityName,id:data[0].cityLists[0].cityId})
                }

            }
        },
        created(){
            var self = this

            var cityData  = pref.getString('cityData')



            this.inputStyle = Object.assign({}, this.defaultInputStyle,this.inputStyle)
            this.titleStyle = Object.assign({}, this.defaultTitleStyle,this.titleStyle)
            this.labelStyle = Object.assign({}, this.defaultLabelStyle,this.labelStyle)
            this.containerStyle.height = this.height

            if(!cityData) {
                nw.postDefine('/app/user/register/getUserTypesCityData',{
                    success(res){
                        pref.setString('cityData',JSON.stringify(res.cityDatas))

                        var data = []
                        for(let i in res.userTypes){
                            var ele  = res.userTypes[i]
                            var dt = {
                                name:ele.bigTypeName,
                                value:ele.bigTypeId,
                                next:[]
                            }
                            for(let j in ele.userTypeList){
                                var d = ele.userTypeList[j]
                                dt.next.push({name:d.userTypeName,value:d.userTypeId})
                            }

                            data.push(dt)
                        }

                        pref.setString('userType',JSON.stringify(data))
                        self.cityData = res.cityDatas
                        self.defaultValue(res.cityDatas)
                    }
                })
            }else{
                self.cityData = JSON.parse(cityData)
                self.defaultValue(self.cityData)

            }

        }
    };
</script>
